<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../plugins/myAxios.js'

// 补考记录列表
const makeupList = ref([])

// 申请表单数据
const makeupForm = ref({
  testItem: '',
  examTime: '',
  examLocation: '',
  scoreId: ''
})

// 表单规则
const rules = {
  testItem: [{ required: true, message: '请输入补考项目名称', trigger: 'blur' }],
  scoreId: [{ required: true, message: '请选择关联成绩', trigger: 'change' }]
}

const getStatusType = (status) => {
  const statusMap = {
    0: 'warning',  // 待安排
    1: 'success',  // 已安排
    3: 'danger'    // 已取消
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    0: '待安排',
    1: '已安排',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取补考记录列表
const getMakeupList = async () => {
  try {
    const res = await myAxios('/student/makeup/list')
    console.log(res)
    makeupList.value =  res;
  } catch (error) {
    ElMessage.error('获取补考记录失败')
  }
}

// 提交补考申请
const submitMakeup = async () => {
  let testItem = makeupForm.value.testItem;
  if(testItem.trim() === ''){
    return ElMessage.warning('请先填写补考科目');
  }
  try {
    await myAxios.post('/student/makeup/submit', {testItem:makeupForm.value.testItem})
    ElMessage.success('申请提交成功')
    getMakeupList() // 刷新列表
  } catch (error) {
    ElMessage.error('申请提交失败')
  }
}

// 取消补考申请
const cancelMakeup = async (makeupId) => {
  try {
    await myAxios.post(`/student/makeup/cancel/${makeupId}`, )
    ElMessage.success('取消申请成功')
    getMakeupList() // 刷新列表
  } catch (error) {
    ElMessage.error('取消申请失败')
  }
}

onMounted(() => {
  getMakeupList()
})
</script>

<template>
  <div class="makeup-container">
    <!-- 申请表单 -->
    <el-card class="makeup-form">
      <template #header>
        <div class="card-header">
          <span>补考申请</span>
        </div>
      </template>

      <el-form :model="makeupForm" :rules="rules" label-width="100px">
        <el-form-item label="补考项目" prop="testItem">
          <el-input v-model="makeupForm.testItem" placeholder="请输入补考项目名称" />
        </el-form-item>

<!--        <el-form-item label="关联成绩" prop="scoreId">-->
<!--          <el-select v-model="makeupForm.scoreId" placeholder="请选择关联成绩">-->
<!--            &lt;!&ndash; 这里需要添加成绩选项 &ndash;&gt;-->
<!--          </el-select>-->
<!--        </el-form-item>-->

        <el-form-item>
          <el-button type="primary" @click="submitMakeup">提交申请</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 补考记录列表 -->
    <el-card class="makeup-list">
      <template #header>
        <div class="card-header">
          <span>补考申请记录</span>
        </div>
      </template>

      <el-table :data="makeupList" style="width: 100%">
        <el-table-column prop="testItem" label="补考项目" />
        <el-table-column prop="applyTime" label="申请时间" />
        <el-table-column prop="examTime" label="考试时间">
          <template #default="scope">
            {{ scope.row.examStatus === 0 ? '-' : scope.row.examTime }}
          </template>
        </el-table-column>
        <el-table-column prop="examLocation" label="考试地点" />
        <el-table-column prop="examStatus" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.examStatus)">
              {{ getStatusText(scope.row.examStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="scope.row.examStatus === 0"
              type="danger"
              size="small"
              @click="cancelMakeup(scope.row.makeupId)"
            >
              取消申请
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.makeup-container {
  padding: 20px;
}

.makeup-form {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
}

.el-card {
  margin-bottom: 20px;
}
</style>
